/**
 * @description 注册模块
 * 
 */
import './register.less'
import { useRef, useEffect, useState } from 'react';
import { Button, Form, message } from 'antd';

// TODO:
import { addTouchEvent, reomveTouchEvent } from "@/utils/touchEvent";

import YyFormItem from '@/components/FormItem'
import MobileForm from './components/MobileForm';



function RegisterPage({ register }) {
  let base = register.base
  let {
    bg_type,
    background_image,
    form_animate,
    title_flag,
    title_suffixFlag,
    title_suffix,

    register_text,
    login_text,
    idea1_flag,
    idea1_text,
    idea2_flag,
    idea2_text,
  } = register.base
  let {
    layout,
    labelFlag,
    colonFlag,
  } = register.registerform.base

  const [form] = Form.useForm()
  const pageDiv = useRef(null)
  const [backgroundStyle, setBackgroundStyle] = useState({})
  // 表单
  let formItemList = useRef([
    {
      form_type: 'YyText',
      columnName: 'YyText',
      comments: '普通',
      placeholder: "请输入文本",
      rules: [
        {
          required: true,
          message: '请输入'
        }
      ]
    },
    {
      form_type: 'YyTextNumber',
      columnName: 'YyTextNumber',
      placeholder: "请输入数值",
      comments: '数值'
    },
    {
      form_type: 'YySingleSelect',
      columnName: 'YySingleSelect',
      comments: '单选',
      placeholder: "请选择",
      options: [
        {
          label: '选项一',
          value: '选项一',
        },
        {
          label: '选项二',
          value: '选项二',
        },
      ],
    },
    // {
    //   form_type: 'YyMultilSelect',
    //   columnName: 'YyMultilSelect',
    //   comments: '多选',
    //   placeholder: "请选择",
    //   options: [
    //     {
    //       label: '选项一',
    //       value: '选项一',
    //     },
    //     {
    //       label: '选项二',
    //       value: '选项二',
    //     },
    //   ],
    // },
    {
      form_type: 'YyDatePicker',
      columnName: 'YyDatePicker',
      comments: '日期',
    },
    {
      form_type: 'YyTextArea',
      columnName: 'YyTextArea',
      comments: '多行文本',
    },
    {
      form_type: 'YyFace',
      columnName: 'YyFace',
      comments: '人脸识别',
    },
    {
      form_type: 'YyFile',
      columnName: 'YyFile',
      comments: '文件上传',
    },
  ])

  // 注册submit
  const onFinish = () => {
    message.success('注册成功')
  };

  // 表单校检失败
  const onFinishFailed = (errorInfo) => {
    message.warning('请输入信息');
  };

  useEffect(() => {

    // 滑动事件，控制tab
    addTouchEvent(pageDiv)

    return () => {
      reomveTouchEvent()
    }
  }, [])

  useEffect(() => {
    let newStyle = background_image ? { backgroundImage: `url(${background_image})` } : {}
    setBackgroundStyle(newStyle)
  }, [background_image])
  return (
    // 注册页面容器
    <div className='register' ref={pageDiv}>

      <div className='register-bg' style={backgroundStyle}>

        {/* 表单容器 */}
        <Form
          form={form}
          name="registerform"
          layout={layout}
          className={`registerform animate__animated animate__${form_animate}`}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          colon={colonFlag}
          autoComplete="off"
          spellCheck="false"
        >

          <div className='registerform-wrapper'>

            {/* 标题 */}
            {
              title_flag &&
              <div className="title-box">
                <span className="title">林伟楠测试单----------------测试</span>
                {
                  title_suffixFlag &&
                  <span className="title-suffix">{title_suffix}</span>
                }
              </div>
            }



            {/* 表单，根据type确定不同的输入框 */}
            {
              formItemList.current.map(column => (
                <YyFormItem key={column.columnName} form={form} column={column} showLabel={labelFlag} />
              ))
            }

            {
              // 特殊类1：手机注册
              <MobileForm form={form} tableName='users' showLabel={labelFlag} />
            }


            {/* 按钮盒子*/}
            <div className='btn-wrapper'>

              {/* 注册 */}
              <div className='register-box'>
                <Button className='register-btn' type="primary" htmlType="submit">{register_text}</Button>
              </div>

              {/* 登录 */}
              <div className='login-box'>
                <Button className='login-btn' type="link">{login_text}</Button>
              </div>
            </div>

          </div>

          {/* 两个空盒子 */}
          {
            idea1_flag &&
            <div className='idea_1'>{idea1_text}</div>
          }
          {
            idea2_flag &&
            <div className='idea_2'>{idea2_text}</div>
          }
        </Form>
      </div>

    </div>
  )
}

export default RegisterPage